<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .flex-container {
      height: 300px;
      width: 300px;
      background-color: skyblue;
      /* 弹性布局 */
      display: flex;
      /* 项目放不下自动换行 */
      flex-wrap: wrap;
      /* 多轴线在交叉轴上的对齐方式 */
      align-content: space-around;
    }
    .flex-item {
      width: 50px;
      line-height: 50px;
      font-size: 30px;
      color: #fff;
      text-align: center;
      background-color: tomato;
      padding: 5px 10px;
      margin: 5px;
    }
    .flex-item:nth-child(1) {
      height: 50px;
    }
    .flex-item:nth-child(2) {
      height: 100px;
    }
  </style>
<body>
    <!-- 
        TIP

        align-content属性定义了多根轴线在 交叉轴上 的对齐方式。
        如果项目只有一根轴线，该属性不起作用。

        
        属性值	说明
        stretch	（默认值）轴线占满整个交叉轴（没有设置高度时生效）
        flex-start	与交叉轴的起点对齐
        flex-end	与交叉轴的终点对齐
        center	与交叉轴的中点对齐
        space-between	与交叉轴两端对齐，轴线之间的间隔平均分布
        space-around	每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
    -->

    <div class="flex-container">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
        <div class="flex-item">5</div>
        <div class="flex-item">6</div>
      </div>
</body>
</html>